<template>
	<el-container>
		<el-aside width="8%" class="nav-bar">
			<div class="logo-container">
				<!-- 分类 -->
				<div class="logo-item" @click="navigation(1)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589930950" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="9947" width="50" height="50">
							<path
								d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z"
								fill="#1296db" p-id="9948"></path>
						</svg>
					</svg>
					<span style="color: #1296db;">分类</span>
				</div>
				<!-- 商品 -->
				<div class="logo-item" @click="navigation(2)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589137588" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="5353" width="50" height="50">
							<path
								d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m326.4 128l56.8 512H192l56.8-512"
								p-id="5354" fill="#e6e6e6"></path>
							<path d="M447.2 352.8H384V416h63.2v-63.2zM640 352.8h-63.2V416H640v-63.2z" p-id="5355"
								fill="#e6e6e6"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">商品</span>
				</div>
				<!-- 订单 -->
				<div class="logo-item" @click="navigation(3)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589228580" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="6429" width="50" height="50">
							<path
								d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z"
								fill="#e6e6e6" p-id="6430"></path>
							<path
								d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z"
								fill="#e6e6e6" p-id="6431"></path>
							<path
								d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z"
								fill="#e6e6e6" p-id="6432"></path>
							<path
								d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z"
								fill="#e6e6e6" p-id="6433"></path>
							<path
								d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z"
								fill="#e6e6e6" p-id="6434"></path>
							<path
								d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z"
								fill="#e6e6e6" p-id="6435"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">订单</span>
				</div>
				<!-- 我的 -->
				<div class="logo-item" @click="navigation(4)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589429644" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="7489" width="50" height="50">
							<path
								d="M586.945923 513.581008c55.067176-27.962865 92.91211-85.125773 92.91211-150.998039 0-93.338828-75.937506-169.276335-169.277358-169.276335s-169.275311 75.937506-169.275311 169.276335c0 65.872267 37.844933 123.034151 92.911086 150.998039-95.652524 32.016181-164.778904 122.45496-164.778904 228.743728 0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707c0-110.36869 89.791026-200.160739 200.160739-200.160739S710.741413 631.956046 710.741413 742.324736c0 11.31572 9.17394 20.491707 20.491707 20.491707s20.491707-9.174963 20.491707-20.491707C751.723803 636.035968 682.598446 545.598212 586.945923 513.581008zM382.287753 362.582969c0-70.742181 57.552787-128.293945 128.292921-128.293945 70.742181 0 128.293945 57.552787 128.293945 128.293945 0 70.741157-57.552787 128.292921-128.293945 128.292921C439.84054 490.876913 382.287753 433.324126 382.287753 362.582969z"
								fill="#e6e6e6" p-id="7490"></path>
							<path
								d="M827.871087 196.127889C743.498468 111.757317 631.320573 65.290005 512 65.290005S280.500509 111.756293 196.128913 196.127889C111.756293 280.501532 65.291029 392.678404 65.291029 511.998977s46.465265 231.499491 130.837884 315.872111 196.550515 130.837884 315.871087 130.837884 231.498468-46.465265 315.871087-130.837884S958.708971 631.319549 958.708971 511.998977 912.243707 280.500509 827.871087 196.127889zM512 917.726581c-223.718271 0-405.726581-182.007287-405.726581-405.727605 0-223.718271 182.00831-405.726581 405.726581-405.726581s405.726581 182.007287 405.726581 405.726581C917.726581 735.719294 735.718271 917.726581 512 917.726581z"
								fill="#e6e6e6" p-id="7491"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">我的</span>
				</div>
				<!-- 工具 -->
				<div class="logo-item" @click="navigation(5)">
					<svg height="50" width="50" class="logo">
						<svg t="1715589731055" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="8858" width="50" height="50">
							<path
								d="M928 257.7H768v-97.4c0-35.3-28.7-64-64-64H320c-35.3 0-64 28.7-64 64v97.4H96c-17.7 0-32 14.3-32 32v606c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32v-606c0-17.7-14.3-32-32-32z m-608-97.4h384v97H320v-97z m576 703.4H128v-271h281v60c0 17.7 14.3 32 32 32h142c17.7 0 32-14.3 32-32v-60h281v271z m-423-243v-120h78v120h-78z m423-92H615v-60c0-17.7-14.3-32-32-32H441c-17.7 0-32 14.3-32 32v60H128v-207h768v207z"
								fill="#e6e6e6" p-id="8859"></path>
						</svg>
					</svg>
					<span style="color: #e6e6e6;">工具</span>
				</div>
			</div>
		</el-aside>
		<el-main>
			<el-row>
				<el-col :span="8">
					<div class="search-container">
					    <span class="search-label">类别名称：</span>
					    <el-input class="el-input_index" placeholder="请输入类别名称" v-model="classification.name" clearable>
					    </el-input>
					    <el-button icon="el-icon-search" circle @click="getClassificationByMerchantId()"></el-button>
					</div>
				</el-col>
				<el-col :span="16">
					<div class="content-right">
						<div class="avatar">
							<el-dropdown @command="logout">
								<el-avatar :size="60" :src="this.userInfo.avatar"></el-avatar>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="a">更改信息</el-dropdown-item>
									<el-dropdown-item @click="logout()" command="b">退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div class="addButton">
							<el-button plain @click="showCommodityDialog()">新增类别</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
			<!-- 主内容区 -->
			<div class="block">
				<el-table :data="classificationList">
					<!-- 表格列 -->
					<el-table-column prop="id" label="ID"></el-table-column>
					<el-table-column prop="name" label="套餐名称"></el-table-column>
					<el-table-column prop="describe" label="说明"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<div>
								<el-link type="primary" @click="showCommodityDialog1(scope.row.id)">修改</el-link>
							</div>
							<div>
								<el-link type="danger" @click="deleteClassification(scope.row.id)">删除</el-link>
							</div>
							<div>
								<el-link type="success" @click="viewProducts(scope.row.id)">管理</el-link>
							</div>
						</template>
					</el-table-column>
					<!-- 其他表格列 -->
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[2, 5, 10, 100]" :page-size="5"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<!-- 新增类别弹出层 -->
			<el-dialog title="新增类别" :visible.sync="commodityDialogVisible" width="80%"
				:before-close="commodityHandleClose">
				<el-form ref="form" :model="classification" label-width="100px">
					<el-form-item label="类别名称">
						<el-input v-model="classification.name"></el-input>
					</el-form-item>
					<el-form-item label="类别描述">
						<el-input v-model="classification.describe"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="addClassification">提交</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 修改类别弹出层 -->
			<el-dialog title="修改类别" :visible.sync="commodityDialogVisible1" width="80%"
				:before-close="commodityHandleClose1">
				<el-form ref="form" :model="classification" label-width="100px">
					<el-form-item label="类别名称">
						<el-input v-model="classification.name"></el-input>
					</el-form-item>
					<el-form-item label="类别描述">
						<el-input v-model="classification.describe"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="updateClassification">提交</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-main>
	</el-container>
</template>


<script>
	import axios from 'axios';
	axios.interceptors.request.use(config => {
		const token = localStorage.getItem('token');
		console.log(token);
		if (token) {
			config.headers.token = `${token}`;
		}
		return config;
	});
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					tele: null,
					name: null,
					password: null,
					avatar: null,
					qq: null,
					wechat: null,
					status: null,
				},
				commodityDialogVisible: false,
				commodityDialogVisible1: false,
				classification: {
					id: null,
					name: "",
					describe: null,
					merchantId: null,
				},

				total: null,
				classificationList: [],
				page: 1,
				pageSize: 5,
			}

		},
		created() {
			//根据商家id查询商家信息
			this.getMerchantById();
			//根据商家id查询分类
			this.getClassificationByMerchantId();
			
		},
		methods: {
			/**
			 * 退出登录
			 */
			logout(command) {
				if (command == 'a') {
					this.$router.push('/merchant_my');
				} else {
					// 清除本地存储中的 Token
					localStorage.removeItem('token');
					this.$router.push('/');
				}
			},
			viewProducts(id) {
				const url = "/classification_commodity?id=" + id;
				this.$router.push(url);
			},
			navigation(num) {
				if (num == 1) {
					this.$router.push('/merchant_index');
				} else if (num == 2) {
					this.$router.push('/merchant_commodity');
				} else if (num == 3) {
					this.$router.push('/merchant_order');
				} else if (num == 4) {
					this.$router.push('/merchant_my');
				} else {
					this.$router.push('/merchant_tool');
				}
			},
			//根据商家id查询所有分类
			getClassificationByMerchantId() {
				try {
					const url = "http://81.70.99.233:8090/classification/merchant?page=" +
						this.page + "&pageSize=" + this.pageSize + "&name=" + this.classification.name;
					const response = axios.get(url, {}).then(
						response => {
							const responseData = response.data;
							this.classificationList = responseData.records;
							this.total = responseData.total;
						});
				} catch (error) {
					console.error('获取商家分类信息：', error);
				}
			},
			// 监听pagesize改变的事件
			handleSizeChange(newSize) {
				this.pageSize = newSize;
				this.getClassificationByMerchantId();
			},

			//监听多少页值改变的事件
			handleCurrentChange(newPage) {
				this.page = newPage;
				console.log("当前应该跳转到" + newPage);
				this.getClassificationByMerchantId();
			},
			/**
			 * 打开类别弹出层
			 */
			showCommodityDialog() {
				this.commodityDialogVisible = true;
			},
			/**
			 * 关闭类别弹出层
			 */
			commodityHandleClose() {
				// 在这里可以处理一些关闭弹出层前的逻辑
				this.commodityDialogVisible = false;
			},
			/**
			 * 打开类别弹出层
			 */
			showCommodityDialog1(id) {
				this.commodityDialogVisible1 = true;
				this.classification.id = id;
				this.getClassificationById();
			},
			/**
			 * 关闭类别弹出层
			 */
			commodityHandleClose1() {
				// 在这里可以处理一些关闭弹出层前的逻辑
				this.commodityDialogVisible1 = false;
			},
			//新增分类
			addClassification() {
				if (this.classification.name == null || this.classification.describe == null) {
					this.$message({
						showClose: true,
						message: '请填写必要信息',
						type: 'warning'
					});
				} else {
					axios.post('http://81.70.99.233:8090/classification/', this.classification, {})
						.then(response => {
							this.$message({
								showClose: true,
								message: "添加类别成功！",
								type: 'success'
							});
							// 刷新当前页面
							location.reload();
							this.commodityDialogVisible = false;
						})
						.catch(error => {
							// 请求失败处理逻辑
							console.error('添加类别失败', error);
						});
				}
			},
			/**
			 * 删除类别
			 */
			deleteClassification(id) {
				this.$confirm('该类别被删除后，所属的商品将会被转为默认类别, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					try {
						const url = "http://81.70.99.233:8090/classification/" + id;
						console.log(url);

						const response = axios.delete(url, {}).then(response => {
							if (response.data.code == 1) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								// 刷新当前页面
								location.reload();
							} else {
								this.$message({
									type: 'error',
									message: response.data.msg
								});
							}
						});
					} catch (error) {
						console.error('删除接口调用失败：', error);
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/**
			 * 修改分类信息
			 */
			updateClassification() {
				if (this.classification.name == null || this.classification.describe == null) {
					this.$message({
						showClose: true,
						message: '请填写必要信息',
						type: 'warning'
					});
				} else {
					axios.put('http://81.70.99.233:8090/classification/', this.classification, {})
						.then(response => {
							this.$message({
								showClose: true,
								message: "更改类别成功！",
								type: 'success'
							});
							// 刷新当前页面
							location.reload();
							this.commodityDialogVisible = false;
						})
						.catch(error => {
							// 请求失败处理逻辑
							console.error('更改类别失败', error);
						});
				}
			},
			/**
			 * 根据id获得分类信息
			 */
			getClassificationById() {
				try {
					const url = "http://81.70.99.233:8090/classification/" + this.classification.id;
					const response = axios.get(url, {}).then(
						response => {
							const responseData = response.data;
							this.classification = responseData.data[0];
						});
				} catch (error) {
					console.error('获取商品分页信息：', error);
				}
			},
			//根据id查询商家
			getMerchantById() {
				try {
					const url = "http://81.70.99.233:8090/merchant/getMerchantById";
					const response = axios.get(url, {}).then(
						response => {
							const responseData = response.data;
							this.userInfo = responseData.data;
						});
				} catch (error) {
					console.error('获取商家信息：', error);
				}
			},
			


		}
	}
</script>

<style scoped>
	.nav-bar {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 100vh;
	    background-color: #333;
	}
	
	.logo-container {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-evenly;
	    height: 100%;
	}
	
	.logo-item {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    cursor: pointer;
	}
	
	.logo {
	    margin-bottom: 5px;
	}
	
	.content-right {
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	    height: 60px;
	}
	
	.avatar {
	    margin-right: 30px;
	}
	
	.search-container {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start; /* 从左侧开始 */
	    width: 100%; /* 占满父容器的宽度 */
	    padding: 10px; /* 添加一些内边距 */
	}
	
	.search-label {
	    white-space: nowrap; /* 防止标签文本换行 */
	    margin-right: 8px; /* 与输入框之间的距离 */
	}
	
	.el-input_index {
	    flex-grow: 1; /* 允许输入框增长填满剩余空间 */
	    max-width: 150px; /* 设置最大宽度 */
		margin-right: 15px;
	}
	
	.el-button {
		
	    flex-grow: 0; /* 防止按钮拉伸，保持其原始大小 */
	}

</style>